<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .content{
            /* 设置边框*/
            border: 1px solid grey;
            width: 400px;
            background: white;
            margin: auto;
            text-align: center;
        }

    </style>
</head>
<body background="../img/bg.png">
<div>

    <img src="../img/logo.png" height="31" width="135"/></div>

<div class="content">
    <form action="#" method="get">
        <div>注册详情</div><hr>
        <div>
            <label for="username">姓名：</label>
            <input type="text" id="username" name="username" placeholder=" 在此输入用户名" autocomplete="off">
        </div><hr>
        <div>
            <label for="password"> 密码：</label>
            <input type="number" id="password" name="password" placeholder=" 在此输入密码" autocomplete="off">
        </div><hr>
        <div>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder=" 在此输入邮箱">
        </div><hr>
        <div>
            <label for="tel">手机：</label>
            <input type="tel" id="tel" name="tel" placeholder=" 在此输入手机号">
        </div><hr>
        
        <div>
            <div>
                <label for="sex">性别：</label>
                <input type="radio" id="sex" name="sex" value="">男
                <input type="radio"  name="sex" value="0">女
                <input type="radio" name="sex" value="other">其他<br>

            </div>
            <div>
                <label for="hobby">爱好：</label>
                <input type="checkbox" id="hobby" name="hobby" value="music" checked>音乐
                <input type="checkbox" name="hobby" value="movie">电影
                <input type="checkbox" name="hobby" value="game">游戏<br>
            </div>
            <div>
                <label for="birthday">出生日期：</label>
                <input type="date" id="birthday" name="birthday"><br>
            </div>
            <div>
                <label for="tel">所在城市：</label>
                <select name="" id="">
                    <option value="">——请选择所在省城市——</option>
                    <optgroup label="省会城市">
                        <option>武汉</option>
                        <option>杭州</option>
                    </optgroup>
                    <optgroup label="直辖市">
                        <option>天津</option>
                        <option>北京</option>
                    </optgroup>
                </select>
            </div><hr>
            <div>
                <textarea name="desc" id="desc" cols="30" rows="10" placeholder="请写下你的独一无二"></textarea>
            </div>
            <hr>
        <div>
            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </div>
        </div>
    </form>
</div>
</body>
</html>